<template>
  <view class="container" :data-theme="currentTheme">
    <uni-card is-full :is-shadow="false" :data-theme="currentTheme">
      <text class="uni-h6"
        >弹出层组件用于弹出一个覆盖到页面上的内容，使用场景如：底部弹出分享弹窗、页面插屏广告等。</text
      >
    </uni-card>

    <uni-section title="" sub-title="" type="" :data-theme="currentTheme">
      内容主体，可自定义内容及样式
    </uni-section>

    <uni-section title="对话框示例" type="line" class="hideOnPc" :data-theme="currentTheme">
      <view class="example-body box">
        <button class="button popup-success" @click="dialogToggle('success')">
          <text class="button-text success-text">成功</text>
        </button>
        <button class="button popup-error" @click="dialogToggle('error')">
          <text class="button-text error-text">失败</text>
        </button>
        <button class="button popup-warn" @click="dialogToggle('warn')">
          <text class="button-text warn-text">警告</text>
        </button>
        <button class="button popup-info" @click="dialogToggle('info')">
          <text class="button-text info-text">信息</text>
        </button>
      </view>
    </uni-section>

    <view>
      <!-- 提示窗示例 -->
      <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog
          :type="msgType"
          cancel-text="关闭"
          confirm-text="同意"
          title="通知"
          content="欢迎使用 uni-popup!"
          @confirm="dialogConfirm"
          @close="dialogClose"
        ></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { onShow } from '@dcloudio/uni-app'
  import { useI18n } from 'vue-i18n'

  const msgType = ref('success')
  const messageText = ref('这是一条成功提示')
  const alertDialog = ref(null)
  const message = ref(null)
  const i18n = useI18n()

  function dialogToggle(type) {
    msgType.value = type
    alertDialog.value.open()
  }

  function dialogConfirm() {
    console.log('点击确认')
    messageText.value = `点击确认了 ${this.msgType} 窗口`
    message.value.open()
  }

  function dialogClose() {
    console.log('点击关闭')
  }

  onShow(() => {
    uni.setTabBarItem({
      index: 1,
      text: i18n.t('tabBar.bTitle')
    })
    uni.setNavigationBarTitle({
      title: i18n.t('moduleB.title')
    })
  })
</script>

<style lang="scss">
  @import '../../scss/data-theme';
  @mixin flex {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
  }

  @mixin height {
    /* #ifndef APP-NVUE */
    height: 100%;
    /* #endif */
    /* #ifdef APP-NVUE */
    flex: 1;
    /* #endif */
  }
  .container{
    height: 100%  !important;
  }
  .box {
    @include flex;
  }

  .button {
    @include flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 35px;
    margin: 0 5px;
    border-radius: 5px;
  }

  .example-body {
    background-color: #fff;
    padding: 10px 0;
  }

  .button-text {
    color: #fff;
    font-size: 12px;
  }

  .popup-content {
    @include flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    height: 50px;
    background-color: #fff;
  }

  .popup-height {
    @include height;
    width: 200px;
  }

  .text {
    font-size: 12px;
    color: #333;
  }

  .popup-success {
    color: #fff;
    background-color: #e1f3d8;
  }

  .popup-warn {
    color: #fff;
    background-color: #faecd8;
  }

  .popup-error {
    color: #fff;
    background-color: #fde2e2;
  }

  .popup-info {
    color: #fff;
    background-color: #f2f6fc;
  }

  .success-text {
    color: #09bb07;
  }

  .warn-text {
    color: #e6a23c;
  }

  .error-text {
    color: #f56c6c;
  }

  .info-text {
    color: #909399;
  }

  .dialog,
  .share {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
  }

  .dialog-box {
    padding: 10px;
  }

  .dialog .button,
  .share .button {
    /* #ifndef APP-NVUE */
    width: 100%;
    /* #endif */
    margin: 0;
    margin-top: 10px;
    padding: 3px 0;
    flex: 1;
  }

  .dialog-text {
    font-size: 14px;
    color: #333;
  }
</style>
